<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薪资追踪仪表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="dashboard">
        <header>
        <h1>薪资追踪仪表盘</h1>
    </header>

        <main>
            <section id="core-data-overview">
                <h2>核心数据概览</h2>
                <div class="overview-container">
                    <div class="overview-card">
                        <h3>累计欠薪月数</h3>
                        <p id="total-arrears-months">0</p>
                    </div>
                    <div class="overview-card">
                        <h3>本年已结清月数</h3>
                        <p id="yearly-settled-months">0</p>
                    </div>
                    <div class="overview-card">
                        <h3>本年未发薪月数</h3>
                        <p id="yearly-unpaid-months">0</p>
                    </div>
                    <div class="overview-card">
                        <h3>累计欠缴社保</h3>
                        <p id="total-arrears-social-security">0</p>
                    </div>
                    <div class="overview-card">
                        <h3>累计欠缴公积金</h3>
                        <p id="total-arrears-housing-fund">0</p>
                    </div>
                </div>
            </section>

            <section class="monthly-breakdown">
                <h2>月度明细</h2>
                <div class="year-toggle">
                    <button id="toggle-2024" class="toggle-btn">显示2024年数据</button>
                </div>
                <table class="monthly-table">
                    <thead>
                        <tr>
                            <th>月份</th>
                            <th>整体状态</th>
                            <th>上半月</th>
                            <th>下半月</th>
                            <th>社保状态</th>
                            <th>公积金状态</th>
                        </tr>
                    </thead>
                    <tbody id="monthly-table-body">
                        <!-- Monthly data will be rendered here -->
                    </tbody>
                </table>
            </section>

            <section class="historical-trends">
                <h2>历史趋势</h2>
              
                <div class="chart-tabs">
                    <button class="tab-btn active" data-tab="salary">薪资</button>
                    <button class="tab-btn" data-tab="social">社保</button>
                    <button class="tab-btn" data-tab="housing">公积金</button>
                </div>
                <div class="tab-content" id="salary-tab" style="display: block;">
                    <p class="chart-note">注：图表数据默认按10000元薪资为单位展示，以便简单直观地查看趋势变化</p>
                    <div class="chart-container">
                        <canvas id="monthly-received-chart"></canvas>
                    </div>
                    <div class="chart-container">
                        <canvas id="cumulative-arrears-chart"></canvas>
                    </div>
                </div>
                <div class="tab-content" id="social-tab" style="display: none;">
                    <div class="chart-container">
                        <canvas id="monthly-social-chart"></canvas>
                    </div>
                    <div class="chart-container">
                        <canvas id="cumulative-social-chart"></canvas>
                    </div>
                </div>
                <div class="tab-content" id="housing-tab" style="display: none;">
                    <div class="chart-container">
                        <canvas id="monthly-housing-chart"></canvas>
                    </div>
                    <div class="chart-container">
                        <canvas id="cumulative-housing-chart"></canvas>
                    </div>
                </div>
            </section>
        </main>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>